
<div class="address-mask">
  <div class="city-select">
    <div class="select-title"><span>热门城市</span><i (click)="dialogRef.close({status:false})"></i></div>
    <div class="ui-row hot-city">
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='北京市'}" (click)="fastPositioning($event,'110000')">北京市</div>
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='上海市'}" (click)="fastPositioning($event,'310000')">上海市</div>
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='广州市'}" (click)="fastPositioning($event,'440100')">广州市</div>
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='深圳市'}" (click)="fastPositioning($event,'440300')">深圳市</div>
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='厦门市'}" (click)="fastPositioning($event,'350200')">厦门市</div>
      <div class="ui-col ui-col-33" [ngClass]="{'active':city.name =='重庆市'}" (click)="fastPositioning($event,'500000')">重庆市</div>
    </div>
    <div class="select-title"><span>省市区选择</span></div>
    <div class="ui-row link-box">
      <div class="ui-col ui-col-33" (panup)="selectProvince($event)" (pandown)="selectProvince($event)"  >
        <p *ngIf="provinceNum == 0"></p>
        <span *ngFor="let province of areaData;let i = index">
           <p *ngIf="i == provinceNum||i == provinceNum-1||i == provinceNum+1 ||i == provinceNum+2"  [ngClass]="{'active':i == provinceNum,'hide-item':i > provinceNum+1}">{{province.name}}</p>
         </span>
      </div>
      <div class="ui-col ui-col-33" (panup)="selectCity($event)" (pandown)="selectCity($event)">
        <p *ngIf="citynum == 0"></p>
        <span *ngFor="let city of province.children;let i = index">
           <p *ngIf="i == citynum||i == citynum-1||i == citynum+1 ||i == citynum+2"   [ngClass]="{'active':i == citynum,'hide-item':i > citynum+1}">{{city.name}}</p>
         </span>
      </div>
      <div class="ui-col ui-col-33" (panup)="selectCounty($event)" (pandown)="selectCounty($event)">
        <p *ngIf="countynum == 0"></p>
        <span *ngFor="let county of city.children;let i = index">
           <p *ngIf="i == countynum||i == countynum-1||i == countynum+1 ||i == countynum+2"   [ngClass]="{'active':i == countynum,'hide-item':i > countynum+1}">{{county.name}}</p>
         </span>
      </div>
    </div>
    <a href="javascript:void (0);" class="ui-btn-ok" (click)="dialogRef.close({status:true,area:{province : province,city : city,county : county}})">确定</a>
  </div>
</div>

<!--<div>-->
  <!--<h2>选择结果：</h2>-->
  <!--<h3>-->
    <!--{{province.name}}-{{city.name}}-{{county.name}}<br/>-->
    <!--===>>><br/>-->
    <!--{{county.code}}-{{code}}-->
  <!--</h3>-->
<!--</div>-->
